<template>
  <div>
    <van-nav-bar
        title="消息"
        style="margin-bottom: 6px"
    />

      <van-cell-group inset v-for="(message,i) in messageArray" class="vcg">
        <router-link :to="{
      path: '/homeview/message/messagePage/userChat',
      query: {
        nickName: message.username,
        url: message.avatar
      }
    }" class="vc">
        <van-icon :dot="message.dot">
          <van-image round width="3rem" height="3rem" :src="message.avatar" />
        </van-icon>
        <van-cell
            center
            :title="message.username"
            :label="message.introduction"
            class="vc"
        >
        </van-cell>
        </router-link>
      </van-cell-group>

  </div>
</template>

<script>
export default {
  name: "MessagePage",
  data() {
  return {
    messageArray: [
      {
        username: "大哥大",
        avatar: "https://s1.328888.xyz/2022/09/05/1xPvN.png",
        introduction: "fuck up!",
        dot: false,
      },
      {
        username: "吕易",
        avatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
        introduction: "fuck up!",
        dot: true,
      },
      {
        username: "泰山",
        avatar: "https://s1.328888.xyz/2022/09/05/1xs1S.png",
        introduction: "fuck up!",
        dot: true,
      },
      {
        username: "大龙",
        avatar: "https://s1.328888.xyz/2022/09/05/1xVDF.png",
        introduction: "fuck up!",
        dot: false,
      },
      {
        username: "小乔",
        avatar: "https://s1.328888.xyz/2022/09/05/1xo2p.png",
        introduction: "fuck up!",
        dot: true,
      },
    ],
  };
},
}
</script>

<style scoped>
.vcg {
  display: flex;
  padding-top: 5px;
}
.vi {
  margin-right: 3px;
}
.vc {
  display: flex;
  margin-left: 8px;
  padding-left: 8px;
  justify-content: center;
  align-items: center;
}
</style>